<template>
  <div class="top">
    <div class="home"></div>
    <img class="home_bg" src="@/assets/home_bg.png" />
    <div class="home_text">
      <div>舌尖上的中国</div>
      <div>舌尖上的旅行</div>
    </div>
  </div>
  <case class="case-container" :data="cases" @more="moreCase" />
  <foods class="case-container" :data="techs" @more="moreTech" />
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import Case from "./components/Case.vue"; // @ is an alias to /src
import Foods from "./components/Foods.vue"; // @ is an alias to /src
import { useRouter } from "vue-router";
const homeData = require("@/json/home.json");

export default {
  name: "Home",
  components: {
    Case,
    Foods,
  },

  setup() {
    const router = useRouter();

    // 友情链接
    const cases = computed(() => {
      return homeData.result.cases;
    });

    // 我的美食
    const techs = computed(() => {
      return homeData.result.foods;
    });

    onMounted(() => {
      // debugger;
    });

    const moreCase = () => {
      window.scrollTo(0, 0);
      router.push("friends-links");
    };

    const moreTech = () => {
      window.scrollTo(0, 0);
      router.push("food-links");
    };

    return {
      cases,
      techs,
      moreCase,
      moreTech,
    };
  },
};
</script>
<style lang="scss" scoped>
.top {
  position: relative;
  background: #39424f;
}

.home_bg {
  position: absolute;
  left: 0px;
  top:50%;
  transform: translateY(-50%);
}

.home_text {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 30px;
  font-weight: bold;
  font-family: Georgia, "Times New Roman", Times, serif;
  div {
    &:last-child {
      margin-top: 30px;
      margin-left: 70px;
    }
  }
}

.home {
  // height: 550px;
  width: 40%;
  background: #13df81;
  border-top: 550px solid #13df81;
  border-right: 550px solid #39424f;
  // border-bottom: 50px solid green;
}

.case-container {
  padding: 50px 300px 0 300px;
}
</style>
